<template>
  <BlogHeader>
    <template #left>
      <span class="text-2xl">文章列表</span>
    </template>
    <template #right>
      <Button @click="router.push('/article/Info')">文章详情</Button>
    </template>
  </BlogHeader>
  <Card 
  class="mt-[80px] mr-3"
  :body-style="{padding:'0 12px 12px 12px'}"
  >
    <template #title>
      <div class="flex w-full  items-center justify-between p-3 text-sm">
        <Tabs>
          <Tabs.TabPane tab="全部"   :key="0" />
          <Tabs.TabPane tab="类别一" :key="1" />
          <Tabs.TabPane tab="类别二" :key="2" />
          <Tabs.TabPane tab="类别三" :key="3" />
        </Tabs>
        <Button type="primary" ghost class="flex items-center"> 
          <Plus />添加文章
        </Button>
      </div>
    </template>
    <Table 
    :columns="[
      {
        title:'文章名称',
        dataIndex:'Atitle',
      },
      {
        title:'创建时间',
        dataIndex:'date',
      },
      {
        title:'创建人',
        dataIndex:'author'
      },
      {
        title:'文章标签',
        dataIndex:'tag'
      },
      {
        title:'操作',
        dataIndex:'action'
      }
    ]">

    </Table>
  </Card>
</template>
<script lang="ts" setup>
import { Button,Table,Tabs ,Card} from 'ant-design-vue';
import BlogHeader from '@/components/BlogHeader.vue';
import {  useRouter } from 'vue-router';
import { Plus } from 'lucide-vue-next';

const router = useRouter()
</script>
<style lang="less">
  
</style>